<template>
    <footer class="menu" :num="counter.count">
        <router-link v-for="item in menu" :to="item.path" :class="item.icon">
            <i></i>
            <p>{{ item.title }}</p>
        </router-link>
    </footer>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
const menu = ref([
    {
        title: "首页",
        path: "/",
        icon: "index_menu"
    },
    {
        title: "购物车",
        path: "shoping",
        icon: "shopping_menu"
    },
    {
        title: "个人中心",
        path: "center",
        icon: "center_menu"
    }
])
</script>
<style lang="less" scoped>
footer.menu {
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 750rem;
    height: 162rem;
    background: #FFFFFF;
    padding: 10rem 0 60rem;
    display: flex;
    justify-content: space-between;

    a {
        flex: 1;
        text-align: center;

        i {
            display: inline-block;
            width: 54rem;
            height: 54rem;
            background: center/contain no-repeat;
            margin-bottom: 5rem;
        }

        p {
            font-size: 24rem;
            font-weight: 400;
            color: #333333;
        }

        &.index_menu {
            i {
                background-image: url("./icon_shouye.png");
            }

            &.router-link-active {
                i {
                    background-image: url('./icon_shouye_选中.png');
                }
            }
        }

        &.shopping_menu {
            position: relative;

            i {
                background-image: url("./icon_shouye (2).png");
            }

            &.router-link-active {
                i {
                    background-image: url('./icon_shouye (1).png');
                }
            }
        }

        &.center_menu {
            i {
                background-image: url("./组 3127.png");
            }

            &.router-link-active {
                i {
                    background-image: url('./组 3127 (1).png');
                }
            }
        }
    }

    &[num] {

        &[num="0"],
        &[num=""] {
            &::after {
                display: none;
            }
        }

        &::after {
            pointer-events: none;
            content: attr(num);
            position: absolute;
            left: 50%;
            top: 10rem;
            min-width: 22rem;
            height: 27rem;
            display: inline-block;
            background-color: #F30000;
            font-size: 22rem;
            color: white;
            text-align: center;
            line-height: 27rem;
            border-radius: 13rem;
            padding: 0 4rem;
        }
    }
}
</style>